<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s06-条件渲染</title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<!-- 1 v-if -->
		<div id="app1">
			<h2 v-if="awesome">vue is awesome!</h2>
			<h2 v-else>oh no!</h2>
		</div>
		<hr />
		<!-- 在 <template> 元素上使用 v-if 条件渲染分组 -->
		<div id="app2">
			<template v-if="ok">
				<h2>title</h2>
				<p>paragraph 1</p>
				<p>paragraph 2</p>
			</template>
		</div>
		<hr />
		<!-- v-else -->
		<!-- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别 -->
		<div id="app3">
			<h2 v-if="Math.random() > 0.5">Now you see me</h2>
			<h2 v-else>Now you don't</h2>
		</div>
		<hr />
		<!-- v-else-if -->
		<div id="app4">
			<div v-if="type === 'A'">
			  A
			</div>
			<div v-else-if="type === 'B'">
			  B
			</div>
			<div v-else-if="type === 'C'">
			  C
			</div>
			<div v-else>
			  Not A/B/C
			</div>
		</div>
		<hr />
		<!-- 用 key 管理可复用的元素 -->
		<div id="app5">
			<template v-if="loginType === 'username'">
				<label>username: </label>
				<!-- <input type="text" placeholder="Enter your username" /> -->
				<input type="text" placeholder="Enter your username" key="username-input" />
			</template>
			<template v-else>
				<label>email: </label>
				<!-- <input type="text" placeholder="Enter your email" /> -->
				<!-- 那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，
					<input> 不会被替换掉——仅仅是替换了它的 placeholder。
					这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。
					只需添加一个具有唯一值的 key attribute。如下所示：
					（注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key attribute！）
				-->
				<input type="text" placeholder="Enter your email" key="email-input" />
			</template>
			<input type="button" @click="toggle" value="toggle login type" />
		</div>
		<hr />
		<!-- 2 v-show -->
		<div id="app6">
			<h2 v-show="ok">v-show</h2>
		</div>
		<hr />
		<hr />
		<hr />
		<!-- 3 v-if vs v-show -->
		<hr />
		<hr />
		<hr />
		<!-- 4 v-if 与 v-for 一起使用 -->
		<hr />
		<hr />
		<hr />
		
		
		
		
		<script type="text/javascript">
			// 1 v-if
			new Vue({
				el: '#app1',
				data: {awesome: true}
			})
			new Vue({
				el: '#app2',
				data: {ok: true}
			})
			new Vue({
				el: '#app3'
			})
			new Vue({
				el: '#app4',
				data: {type: 'B'}
			})
			// 用 key 管理可复用的元素
			var vm5 = new Vue({
				el: '#app5',
				data: {
					loginType: 'username',
				},
				methods: {
					toggle: function() {
						if (this.loginType === 'username') {
							this.loginType = 'email'
						} else {
							this.loginType = 'username'
						}
					}
				}
			})
			
			// 2 v-show
			//   注意，v-show 不支持 <template> 元素，也不支持 v-else
			new Vue({
				el: '#app6',
				data: {ok: false}
			})
			
			// 3 v-if vs v-show
			
			// 4 v-if 与 v-for 一起使用
			//   不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。
			//   当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。请查阅列表渲染指南以获取详细信息。




			
			
			
		</script>
		
		
	</body>
</html>
